<template>
  <view class="wrap">
    <infoText ref="infoText"></infoText>
    <view class="heard"></view>
    <view class="banner">
      <view class="bannerA1"></view>
      <view class="banner1">
        <!-- <image class="banner-wz" mode="aspectFit" :src="rewards"></image> -->
      </view>
    </view>
    <view class="middle">
      <img src="./img/middle_rule.png" class="middle-rule" />
      <img src="./img/start_btn_1.png" class="middle-zt" />
    </view>

    <Catcher @goLuckBtn="goLuckBtn" @getLuckRes="getLuckRes" :playNum="playNum" ref="catcherEl"></Catcher>

    <view class="jpzsWrap">
      <view class="jpzsWrap1">奖项设置</view>
      <view class="jpzsWrap3">
        <view class="jpzsWrap2"></view>
        <view class="jpzsWrap34">
          <view class="jpzsWrap31">SKG 颈椎按摩仪K5YA-L(白色)</view>
          <view class="jpzsWrap32">
            <image src="./img/temp1.png" class="image1" mode="aspectFit"></image>
          </view>
        </view>
        <view class="jpzsWrap33">一等奖</view>
      </view>
      <view class="jpzsWrap4">
        <view class="jpzsWrap41">
          <view class="jpzsWrap411">
            <view class="jpzsWrap412">膳魔师电水壶</view>
            <image class="image1" src="./img/temp2.png" mode="aspectFit"></image>
          </view>
          <view class="jpzsWrap42">二等奖</view>
        </view>

        <view class="jpzsWrap41">
          <view class="jpzsWrap411">
            <view class="jpzsWrap412">
              <view>蕉下胶囊伞系列</view>
              <view>海洋系列</view>
            </view>
            <image class="image1" src="./img/temp3.png" mode="aspectFit"></image>
          </view>
          <view class="jpzsWrap42">三等奖</view>
        </view>

        <view class="jpzsWrap41">
          <view class="jpzsWrap411">
            <view class="jpzsWrap412">
              <view>清风小卷纸10卷/提</view>
            </view>
            <image class="image1" src="./img/temp5.png" mode="aspectFit"></image>
          </view>
          <view class="jpzsWrap42">四等奖</view>
        </view>

        <view class="jpzsWrap41">
          <view class="jpzsWrap411">
            <view class="jpzsWrap412">
              <view>30000积分</view>
              <view>部分商品可用</view>
            </view>
            <image class="image2" src="./img/temp6.png" mode="aspectFit"></image>
            <view class="image2txt">立减金</view>
          </view>
          <view class="jpzsWrap42">五等奖</view>
        </view>

        <view class="jpzsWrap41">
          <view class="jpzsWrap411">
            <view class="jpzsWrap412">
              <view>10000积分</view>
              <view>部分商品可用</view>
            </view>
            <image class="image2" src="./img/temp6.png" mode="aspectFit"></image>
            <view class="image2txt">立减金</view>
          </view>
          <view class="jpzsWrap42">六等奖</view>
        </view>

        <view class="jpzsWrap41">
          <view class="jpzsWrap411">
            <view class="jpzsWrap412">
              <view>5000积分</view>
              <view>部分商品可用</view>
            </view>
            <image class="image2" src="./img/temp6.png" mode="aspectFit"></image>
            <view class="image2txt">立减金</view>
          </view>
          <view class="jpzsWrap42">七等奖</view>
        </view>
      </view>
    </view>
    <!-- 中奖名单 -->
    <view class="win-list">
      <view class="win-list1">中奖名单</view>
      <view class="win-list2"></view>
      <view class="list"> </view>
    </view>
  </view>
</template>

<script>
import Catcher from './catcher.vue'

export default {
  data() {
    return {
      playNum: 1000,
      door1: true,
    }
  },
  components: {
    Catcher,
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '欢乐娃娃机',
    })
  },
  methods: {
    goLuckBtn() {
      if (this.door1) {
        this.door1 = false
        this.$refs.catcherEl.goLuckBtn()
      }
    },
    getLuckRes() {
      this.playNum = this.playNum - 1
      this.$refs.infoText.show()
      this.door1 = true
    },
  },
}
</script>

<style scoped lang="scss">
page {
  background: url('./img/bj_bg.png');
  background-size: 100% 311rpx;
}

.wrap {
  position: relative;
  width: 750rpx;
  margin: 0 auto 0;
  padding-bottom: 50rpx;
}

.heard {
  width: 100vw;
  height: 86rpx;
}

.banner {
  margin: 0 auto;
  width: 624rpx;
  height: 357rpx;
  position: relative;
  background-image: url('./img/bannerA1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .banner-wz {
    width: 94%;
    height: 94%;
  }
  .banner1 {
    position: absolute;
    top: 38rpx;
    left: 42rpx;
    width: 504rpx;
    height: 190rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bannerA1 {
    position: absolute;
    top: 3rpx;
    left: 6rpx;
    width: 579rpx;
    height: 260rpx;
    background-image: url('./img/bannerA2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: imgAnima linear 1s infinite;
  }
}

@keyframes imgAnima {
  0% {
    background-image: url('./img/bannerA2.png');
  }

  100% {
    background-image: url('./img/bannerA3.png');
  }
}

.middle {
  margin: 0 auto;
  width: 571rpx;
  height: 93rpx;
  position: relative;
  margin-top: -16rpx;
}

.middle-rule {
  position: absolute;
  width: 571rpx;
  height: 93rpx;
  z-index: 8;
}

.middle-zt {
  position: absolute;
  width: 401rpx;
  height: 36rpx;
  z-index: 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner-mask {
  position: absolute;
  width: 600rpx;
  height: 180rpx;
  background: url(./img/banner_mask.png);
  bottom: 30rpx;
  left: 20rpx;
  z-index: 9;
}

.jpzsWrap {
  width: 621rpx;
  height: 1190rpx;
  background: url('./img/homePage1.png') no-repeat;
  background-size: 100% 100%;
  margin: 84rpx auto 0;
  color: #44000a;
  .jpzsWrap1 {
    text-align: center;
    padding-top: 43rpx;
    line-height: 1;
    padding-bottom: 117rpx;
    font-size: 30rpx;
  }
  .jpzsWrap3 {
    background: url('./img/homePage3.png') no-repeat;
    background-size: 100% 100%;
    width: 521rpx;
    height: 203rpx;
    margin: 0 auto;
    position: relative;
    .jpzsWrap2 {
      background: url('./img/homePage2.png') no-repeat;
      background-size: 100% 100%;
      width: 341rpx;
      height: 92rpx;
      position: absolute;
      top: -56rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    .jpzsWrap34 {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right: 139rpx;
      height: 203rpx;
      .jpzsWrap31 {
        // width: 220rpx;
        font-size: 26rpx;
      }
      .image1 {
        position: absolute;
        right: 19rpx;
        top: 11rpx;
        width: 139rpx;
        height: 173rpx;
      }
    }
    .jpzsWrap33 {
      line-height: 1;
      padding: 14.5rpx 0;
      width: 182rpx;
      background: url('./img/payPage4.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -14rpx;
    }
  }
  .jpzsWrap4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 55rpx 0 50rpx;
    padding-top: 51rpx;
    .jpzsWrap41 {
      margin-bottom: 41rpx;
      padding-top: 20rpx;
      position: relative;
      width: 233rpx;
      height: 200rpx;
      background: url('./img/homePage4.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: relative;
      .jpzsWrap411 {
        .jpzsWrap412 {
          font-size: 24rpx;
          position: absolute;
          left: 0;
          width: 100%;
          top: 20rpx;
          z-index: 10;
        }
        .image1 {
          max-width: 171rpx;
          max-height: 128rpx;
          position: absolute;
          bottom: 20rpx;
          left: 50%;
          transform: translateX(-50%);
        }
        .image2txt {
          position: absolute;
          bottom: 63rpx;
          left: 0;
          width: 100%;
          font-size: 24rpx;
          line-height: 1;
          text-align: center;
        }
        .image2 {
          width: 121rpx;
          height: 87rpx;
          position: absolute;
          bottom: 18rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .jpzsWrap413 {
        .jpzsWrap4131 {
          position: absolute;
          top: 40rpx;
          left: 50%;
          z-index: 10;
          width: 140rpx;
          transform: translateX(-50%);
          font-size: 24rpx;
          line-height: 1.1;
        }
        .image1 {
          max-width: 171rpx;
          max-height: 168rpx;
        }
      }
    }
    .jpzsWrap42 {
      line-height: 1;
      padding: 12rpx 0;
      width: 182rpx;
      background: url('./img/payPage4.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -23rpx;
    }
  }
}

uni-button:after {
  border: none;
}

.win-list {
  position: relative;
  margin-top: 28rpx;
}

.win-list .win-list1 {
  line-height: 1;
  padding-top: 35rpx;
  padding-bottom: 59rpx;
  background: url(./img/win_list_bg1.png) no-repeat;
  background-size: 100% 100%;
  width: 594rpx;
  margin: 0 auto;
  text-align: center;
  font-size: 30rpx;
  color: #44000a;
}

.win-list .win-list2 {
  background: url(./img/win_list_bg2.png) no-repeat;
  background-size: 100% 100%;
  width: 620rpx;
  height: 274rpx;
  margin: 0 auto;
  transform: translateY(-22rpx);
}

.win-list .list {
  position: absolute;
  top: 120rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 558rpx;
  height: 234rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 22rpx;
}
</style>
